<template>
  <div class="hot-topics-container">
    <h3 class="title">
      <el-icon><Star /></el-icon>
      热门话题
    </h3>
    <div v-if="loading" class="loading">
      <el-skeleton :rows="5" animated />
    </div>
    <div v-else>
      <div 
        v-for="(topic, index) in topicList" 
        :key="topic.id"
        class="topic-item" 
        @click="handleTopicClick(topic)"
      >
        <div class="topic-rank">
          <span :class="{ 'top-rank': index < 3 }">{{ index + 1 }}</span>
        </div>
        <div class="topic-info">
          <div class="topic-title">{{ topic.title }}</div>
          <div class="topic-meta">
            <span class="meta-item">
              <el-icon><View /></el-icon>
              {{ topic.views }}
            </span>
            <span class="meta-item">
              <el-icon><ChatDotRound /></el-icon>
              {{ topic.comments }}
            </span>
            <span class="meta-item">
              <el-icon><User /></el-icon>
              {{ topic.authorName }}
            </span>
          </div>
        </div>
      </div>
      <div v-if="topicList.length === 0" class="empty-topics">
        暂无热门话题
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Star, View, ChatDotRound, User } from '@element-plus/icons-vue'

const router = useRouter()

const props = defineProps({
  limit: {
    type: Number,
    default: 5
  },
  loading: {
    type: Boolean,
    default: false
  },
  topics: {
    type: Array,
    default: () => []
  }
})

const topicList = ref([])

// 点击话题跳转到详情页
const handleTopicClick = (topic) => {
  router.push({
    name: 'PostDetail',
    params: { id: topic.id }
  })
}

onMounted(() => {
  // 如果父组件传入了topics，则使用父组件的数据
  if (props.topics && props.topics.length > 0) {
    topicList.value = props.topics.slice(0, props.limit)
  } else {
    // 否则使用默认的模拟数据
    topicList.value = [
      {
        id: 1,
        title: '如何科学安排作息时间，提高学习效率？',
        views: 356,
        comments: 42,
        authorName: '健康达人'
      },
      {
        id: 2,
        title: '大学生常见的颈椎问题如何预防和改善',
        views: 289,
        comments: 36,
        authorName: '校医李医生'
      },
      {
        id: 3,
        title: '校园常见传染病预防指南：保护自己也保护他人',
        views: 245,
        comments: 28,
        authorName: '疾控专家'
      },
      {
        id: 4,
        title: '考试季压力调节：如何保持心理健康',
        views: 198,
        comments: 24,
        authorName: '心理咨询师'
      },
      {
        id: 5,
        title: '大学生饮食指南：平衡营养、健康饮食',
        views: 176,
        comments: 19,
        authorName: '营养师张老师'
      }
    ]
  }
})
</script>

<style lang="scss" scoped>
.hot-topics-container {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 15px;
  
  .title {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: bold;
    color: #303133;
    display: flex;
    align-items: center;
    
    .el-icon {
      color: #f56c6c;
      margin-right: 5px;
    }
  }
  
  .loading {
    padding: 10px 0;
  }
  
  .topic-item {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #ebeef5;
    cursor: pointer;
    transition: all 0.3s;
    
    &:hover {
      background-color: #f5f7fa;
    }
    
    &:last-child {
      border-bottom: none;
    }
    
    .topic-rank {
      width: 30px;
      text-align: center;
      margin-right: 10px;
      
      span {
        display: inline-block;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border-radius: 50%;
        background-color: #ebeef5;
        color: #606266;
        font-weight: bold;
        
        &.top-rank {
          background-color: #f56c6c;
          color: #fff;
        }
      }
    }
    
    .topic-info {
      flex: 1;
      
      .topic-title {
        margin-bottom: 5px;
        font-size: 14px;
        line-height: 1.4;
        color: #303133;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      
      .topic-meta {
        display: flex;
        font-size: 12px;
        color: #909399;
        
        .meta-item {
          display: flex;
          align-items: center;
          margin-right: 15px;
          
          .el-icon {
            margin-right: 3px;
            font-size: 14px;
          }
        }
      }
    }
  }
  
  .empty-topics {
    text-align: center;
    padding: 20px 0;
    color: #909399;
    font-size: 14px;
  }
}
</style> 